<template>
  <div class="consulting-index positRel">
    <div class="main">
      <MenuLocation :title="'直播中心'"></MenuLocation>
      <div class="doctor-content">
        <div class="f-row ai-c mb-1">
          <div class="left_name">直播主题/专家搜索:</div>
          <Input
            v-model="seachObj.keywords"
            placeholder="请输入直播类型"
            icon="ios-search-outline"
            @on-click="keyWordHand"
            @on-search="keyWordHand"
            @on-blur="keyWordHand"
            style="width: 300px"
          />
        </div>
        <div class="f-row ai-c mb-1" v-for="(i, k) in typeArr" :key="k">
          <div class="left_name">
            {{ i.name }}
          </div>
          <div class="f-row ai-c">
            <div
              class="item"
              :class="{ active: seachObj.lxArr.includes(item.id) }"
              @click="tapFn(item.id)"
              v-for="(item, key) in i.children"
              :key="key"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <live-list :column="4" ref="liveList" :seachObj="seachObj"></live-list>
      </div>
    </div>
    <Footer :top="20"></Footer>
  </div>
</template>
<script>
import liveList from "@/components/live/liveList.vue"; //直播列表
import Footer from "@/components/footer/my_footer.vue";
import MenuLocation from "@/components/myComponents/menuLocation.vue";
import { getCourseType } from "@/api/otwoo";
export default {
  data() {
    return {
      value: "", //输入框的值
      typeArr: [],
      seachObj: {
        lxArr: [],
        keywords: "",
      },
    };
  },
  mounted() {
    this.getTypeList();
  },
  methods: {
    getTypeList() {
      getCourseType().then((res) => {
        for (let key in res.result) {
          this.typeArr.push({
            name: key,
            children: res.result[key],
          });
        }
      });
    },
    tapFn(id) {
      if (this.seachObj.lxArr.includes(id)) {
        this.seachObj.lxArr = this.seachObj.lxArr.filter((i) => i != id);
      } else {
        this.seachObj.lxArr.push(id);
      }
      this.$refs.liveList.getList();
    },
    //当前页
    keyWordHand() {
      this.$refs.liveList.getList();
    },
  },
  components: {
    Footer,
    MenuLocation,
    liveList,
  },
};
</script>
<style lang="scss" scoped>
.left_name {
  font-size: 14px;
  font-weight: bold;
  color: #52555a;
  margin-right: 20px;
}
.f-row {
  display: flex;
}
.ai-c {
  align-items: center;
}
.mb-1 {
  margin-bottom: 20px;
}
.active {
  color: #ffffff !important;
  background: #f4333c !important;
}
.item {
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: #63676e;
  padding: 9px 22px;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  margin-right: 20px;
}
.consulting-index {
  min-height: calc(100vh - (80 / 1920 * 100vw));
  padding-bottom: 50px;
  .main {
    // padding: 0px calc(360 / 1920 * 100vw);
    width: calc(1620 / 1920 * 100vw);
    margin: auto;
    .doctor-content {
      position: relative;
      display: flex;
      flex-direction: column;
      background: #fff;
      padding: calc(25 / 1920 * 100vw) calc(24 / 1920 * 100vw);
      border-radius: calc(5 / 1920 * 100vw);
      height: calc(936 / 1920 * 100vw);
    }
  }
}
</style>
